<template>
  <div class="container">
    <div class="top">
      <div class="header">
        <a href="/qudaokoufa">
          <!--          <img src="~@/assets/logo.svg" class="logo" alt="logo">-->
          <span class="title">测评管理系统</span>
        </a>
      </div>
      <div class="desc">
      </div>
    </div>

    <div class="main">
      <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
        <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" @change="handleTabClick">

          <a-tab-pane key="tab1" tab="账号密码登录">
            <login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account>
          </a-tab-pane>

<!--          <a-tab-pane key="tab2" tab="手机号登录">-->
<!--            <login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>-->
<!--          </a-tab-pane>-->
        </a-tabs>

        <a-form-item>
          <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn"
                    @click.stop.prevent="handleSubmit" :disabled="loginBtn">确定
          </a-button>
        </a-form-item>
      </a-form-model>
    </div>

    <!--    <div class="footer">-->
    <!--      <div class="links">-->
    <!--        <a href="http://doc.jeecg.com" target="_blank">帮助</a>-->
    <!--        <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a>-->
    <!--        <a href="https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE" target="_blank">条款</a>-->
    <!--      </div>-->
    <!--      <div class="copyright">-->
    <!--        Copyright &copy; 2019 <a href="http://www.jeecg.com" target="_blank">JEECG开源社区</a> 出品-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { timeFix } from "@/utils/util"
import LoginAccount from './login-account'
import loginPhone from './login-phone'

export default {
  name: "login",
  components: {
    LoginAccount,
    loginPhone
  },
  data () {
    return {
      customActiveKey: 'tab1',
      loginBtn: false,
    }
  },
  created () {
    this.getRouterData()
  },
  methods: {
    handleTabClick (key) {
      this.customActiveKey = key
    },
    /**跳转到登录页面的参数-账号获取*/
    getRouterData () {
      this.$nextTick(() => {
        let username = this.$route.params.username || this.$route.query.username || ''
        if (username) {
          this.$refs.alogin.acceptUsername(username)
        }
        let mobile = this.$route.params.mobile || this.$route.query.mobile || ''
        if (mobile) {
          this.$refs.plogin.acceptMobile(mobile)
        }
      })
    },
    //登录
    handleSubmit () {
      this.loginBtn = true;
      if (this.customActiveKey === 'tab1') {
        // 使用账户密码登录
        this.$refs.alogin.handleLogin()
      } else {
        // 手机号码登录
        this.$refs.plogin.handleLogin()
      }
    },
    // 校验失败
    validateFail () {
      this.loginBtn = false;
    },
    // 登录后台成功
    requestSuccess () {
      this.$router.push({ path: "/home" }).catch(() => {
        console.log('登录跳转首页出错,这个错误从哪里来的')
      })
      this.$notification.success({
        message: '欢迎',
        description: `${ timeFix() }，欢迎回来`,
      });
      this.loginBtn = false
    },
    //登录后台失败
    requestFailed (err) {
      let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试"
      this.$notification['error']({
        message: '登录失败',
        description: description,
        duration: 4,
      });
      //账户密码登录错误后更新验证码
      if (this.customActiveKey === 'tab1') {
        this.$refs.alogin.handleChangeCheckCode()
      }
      this.loginBtn = false;
    },

  }
}
</script>

<style lang="less">

.container {
  width: 100%;
  min-height: 100%;
  background: #f0f2f5 url(~@/assets/svg/background.svg) no-repeat 50%;
  background-size: 100%;
  padding: 110px 0 144px;
  position: relative;

  a {
    text-decoration: none;
  }

  .top {
    text-align: center;

    .header {
      height: 44px;
      line-height: 44px;

      .badge {
        position: absolute;
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
        margin-left: -12px;
        margin-top: -10px;
        opacity: 0.8;
      }

      .logo {
        height: 44px;
        vertical-align: top;
        margin-right: 16px;
        border-style: none;
      }

      .title {
        font-size: 33px;
        color: rgba(0, 0, 0, .85);
        font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: 600;
        position: relative;
        top: 2px;
      }
    }

    .desc {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 12px;
      margin-bottom: 40px;
    }
  }

  .main {
    min-width: 260px;
    width: 368px;
    margin: 0 auto;
  }

  .footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0 16px;
    margin: 48px 0 24px;
    text-align: center;

    .links {
      margin-bottom: 8px;
      font-size: 14px;

      a {
        color: rgba(0, 0, 0, 0.45);
        transition: all 0.3s;

        &:not(:last-child) {
          margin-right: 40px;
        }
      }
    }

    .copyright {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }
  }
}

.user-layout-login {

  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

}
</style>

